<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BasicAuth</title>
    <script src="AnjiVerifyCode/js/jquery.min.js"></script>
    <script src="js/Particleground.js"></script>
    <link href="css/login.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="AnjiVerifyCode/css/verify.css">
    <script>
        $(document).ready(function () {
            $("#login-backgroud").particleground({
                dotColor: '#E8DFE8',
                lineColor: '#133b88'
            })
            if (!window.Promise) {
                document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
            }
        })
    </script>
</head>
<body>
<div id="mpanel2"></div>
<div id="mpanel4"></div>
<div class="login-backgroud" id="login-backgroud">
    <div class="login-box">
        <form name="loginForm" role="form">
            <div class="title">
                <label><font size="4">请输入登录信息</font></label>
            </div>
            <div class="username">
                <label for="userName"> <img src="img/uesname.png" alt=""></label>
                <input id='userName' name="name" type="text" maxlength="10"
                       placeholder="请输入用户名" autocomplete="off" required>
                <label style="margin-left: 80%;"> <img src="img/tick.png" alt="">
                </label>
            </div>
            <div class="password">
                <label for="userPass"> <img src="img/password.png"></label>
                <!--  两个name一样的输入框，防止浏览器自动记住密码 -->
                <input type="password" name="password" style="display: none">
                <input id='userPass' type="text" name="password" maxlength="10"
                       onfocus="this.type='password'" autocomplete="off"
                       placeholder="请输入密码" required>
                <label style="margin-left: 80%;">
                    <img src="img/tick.png" alt="">
                </label>
            </div>
            <!-- 嵌入式滑块验证码 -->
            <div id="mpanel1"></div>
            <!-- 嵌入式点选验证码 -->
            <div id="mpanel3"></div>
            <div class="btn" id="loginBtn" type="submit">
                登&nbsp;&nbsp;&nbsp;&nbsp;录
            </div>
        </form>
    </div>
</div>
<script src="AnjiVerifyCode/js/crypto-js.js"></script>
<script src="AnjiVerifyCode/js/ase.js"></script>
<script src="AnjiVerifyCode/js/verify.js" ></script>
<script>
    //初始化滑块验证码  嵌入式
    // $('#mpanel1').slideVerify({
    //     baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
    //     // baseUrl:'http://localhost:8080/captcha_springmvc_war_exploded',  //local-spring-mvc;
    //     // baseUrl:'http://localhost:8080',  //local-spring-boot;
    //     mode:'fixed',
    //     imgSize : {       //图片的大小对象
    //         width: '400px',
    //         height: '200px',
    //     },
    //     barSize:{
    //         width: '400px',
    //         height: '40px',
    //     },
    //     ready : function() {  //加载完毕的回调
    //     },
    //     success : function(params) { //成功的回调
    //         // 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
    //         console.log(params,"params");
    //
    //     },
    //     error : function() {        //失败的回调
    //     }
    // });

    // 初始化滑块验证码  弹出式
    $('#mpanel2').slideVerify({
        // baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
        baseUrl:'http://localhost:8080/',  //服务器请求地址, 默认地址为安吉服务器;
        mode:'pop',     //展示模式
        containerId:'loginBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
        imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
            width: '400px',
            height: '200px',
        },
        barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
            width: '400px',
            height: '40px',
        },
        beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
            var flag = true;
            //实现: 参数合法性的判断逻辑, 返回一个boolean值
            return flag
        },
    ready : function() {},  //加载完毕的回调
    success : function(params) { //成功的回调
        alert('验证码登录成功');
        console.info(params);
        // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
        // 例如: login($.extend({}, params))
    },
    error : function() {}        //失败的回调
    });

    // 初始化点选验证码  嵌入式
    // $('#mpanel3').pointsVerify({
    //     baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
    //     // baseUrl:'http://10.108.12.12:8080',  //服务器请求地址, 默认地址为安吉服务器;
    //     mode:'fixed',
    //     imgSize : {
    //         width: '500px',
    //         height: '255px',
    //     },
    //     ready : function() {
    //     },
    //     success : function(params) {
    //         //返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
    //     },
    //     error : function() {
    //     }
    //
    // });
    // 初始化点选验证码  弹出式
    // $('#mpanel4').pointsVerify({
    //     baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
    //     containerId:'btn2', // pop模式 必填 被点击之后出现行为验证码的元素id
    //     mode:'pop',
    //     imgSize : {       //图片的大小对象
    //         width: '400px',
    //         height: '200px',
    //     },
    //     ready : function() {
    //     },
    //     success : function(params) {
    //         //返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
    //     },
    //     error : function() {
    //     }
    // });
</script>
</body>
</html>